<template>
	<view>
		<view class="recovey">回收详情</view>
		<view class="box">
			<view class="details">
				<text>废纸(KG):</text>
			</view>
			<view class="number">
				<uni-number-box :value="details.numberValue1" @change="change1" />
			</view>
			<view class="price">
				<text>5币/公斤</text>
			</view>
		</view>
		<view class="box">
			<view class="details">
				<text>塑料(KG):</text>
			</view>
			<view class="number">
				<uni-number-box :value="details.numberValue2" @change="change2" />
			</view>
			<view class="price">
				<text>8币/公斤</text>
			</view>
		</view>
		<view class="box">
			<view class="details">
				<text>金属(KG):</text>
			</view>
			<view class="number">

				<uni-number-box :value="details.numberValue3" @change="change3" />

			</view>
			<view class="price">
				<text>12币/公斤</text>
			</view>
		</view>
		<view class="box">
			<view class="details">
				<text>玻璃(KG):</text>
			</view>
			<view class="number">
				<uni-number-box :value="details.numberValue4" @change="change4" />
			</view>
			<view class="price">
				<text>10币/公斤</text>
			</view>
		</view>
		<view class="total">合计(KG): {{details.sum}} </view>

		<view class="total2">{{details.money}}币</view>

		<button class="button-yuanjiao" @click="settlement(details)">结算</button>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				details: {
					numberValue1: 0,
					numberValue2: 0,
					numberValue3: 0,
					numberValue4: 0,
					sum: 0,
					sum1: 0,
					sum2: 0,
					sum3: 0,
					sum4: 0,
					money: 0,
					money1: 0,
					money2: 0,
					money3: 0,
					money4: 0,
					nums: 0,
					roId: '',
				}
			}
		},
		onLoad(options) {
			// console.log(options,"zhel3")
		},
		methods: {
			settlement(details) {
				console.log(details)
				this.details.roId = this.options.roId
				uni.request({
					url: 'http://localhost:9525/xkrider/recyclingorder/getRedisRecyclingorder',
					method: 'GET',
					data: this.details,
					// data: {
					// 	id:this.options.roId,
					// 	details: this.details,
					// },
					dataType: 'json',
					success: (res) => {
						console.log("22222222")						
					},
				})
				uni.showToast({
					title:"结算成功,请去完成订单查看",
					duration:2000,
					icon:"none",
					// success: (res) => {
					// 	uni.navigateTo({
					// 		url: './OrderCompletionDetails'
					// 	})					
					// },
				})
				
			},
			change1(value) {
				this.details.sum1 = value
				// console.log(this.details.sum1,"zhel1")
				this.details.sum = this.details.sum1 + this.details.sum2 + this.details.sum3 + this.details.sum4
				this.details.money1 = value * 5
				this.details.money = this.details.money1 + this.details.money2 + this.details.money3 + this.details.money4
			},
			change2(value) {
				this.details.sum2 = value
				this.details.sum = this.details.sum1 + this.details.sum2 + this.details.sum3 + this.details.sum4
				this.details.money2 = value * 8
				this.details.money = this.details.money1 + this.details.money2 + this.details.money3 + this.details.money4
			},
			change3(value) {
				this.details.sum3 = value
				this.details.sum = this.details.sum1 + this.details.sum2 + this.details.sum3 + this.details.sum4
				this.details.money3 = value * 12
				this.details.money = this.details.money1 + this.details.money2 + this.details.money3 + this.details.money4
			},
			change4(value) {
				this.details.sum4 = value
				this.details.sum = this.details.sum1 + this.details.sum2 + this.details.sum3 + this.details.sum4
				this.details.money4 = value * 10
				this.details.money = this.details.money1 + this.details.money2 + this.details.money3 + this.details.money4
			},
		}
	}
</script>

<style>
	page {
		/* background-color: #EBFCF9; */
		font-weight: bold;
	}

	.box {
		/* border: 5px solid #3F536E; */
		float: left;
		width: 100%;
		margin-top: 10rpx;
	}

	.price {
		float: right;
		margin-top: 20rpx;
		margin-right: 20rpx;
		font-size: 30rpx;
		color: #ED5565;
	}

	.number {
		margin-top: 20rpx;
		margin-left: 10rpx;
		float: left;
	}

	.total {
		font-size: 40rpx;
		margin-top: 60rpx;
		margin-left: 50rpx;
		float: left;
	}

	.total2 {
		font-size: 40rpx;
		margin-top: 60rpx;
		margin-right: 50rpx;
		float: right;
		color: #ED5565;
	}

	.details {
		font-size: 30rpx;
		margin-top: 20rpx;
		margin-left: 100rpx;
		float: left;
	}

	.recovey {
		font-size: 40rpx;
		margin-top: 50rpx;
		margin-left: 50rpx;
	}

	.button-yuanjiao {

		width: 600rpx;
		height: 80rpx;
		display: flex;
		line-height: 50rpx;
		justify-content: center;

		border-radius: 25px;
		/* // 这里可以改成渐变： 
		// background: linear-gradient(to right, #2ECC71, #2ABA66); */
		background-color: #2ECC71;
		font-size: 17px;
		color: #FFFFFF;
		margin-top: 300px;
		padding: 7px;
		/* // font-family:STCaiyun; */

	}
</style>
